<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息展示</title>
    <script src="./static/js/vue.global.js"></script>
    <style>
      body {
          font-family: Arial, sans-serif;
          max-width: 600px;
          margin: 20px auto;
          padding: 20px;
      }
      .info-container {
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          padding: 20px;
      }
      dt {
          font-weight: bold;
          margin-top: 10px;
          color: #2c3e50;
      }
      dd {
          margin-left: 0;
          color: #7f8c8d;
      }
      .signature {
          background-color: #f9f9f9;
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 4px;
          margin-top: 10px;
      }
      .signature p {
          margin: 0;
      }
      .signature span {
          color: #e74c3c;
          font-weight: bold;
      }
      .signature a {
          color: #3498db;
          text-decoration: none;
      }
    </style>
</head>
<body>
   <div id="counter">
      <div class="info-container">
         <h2>个人基本信息</h2>
         <dl>
             <dt>姓名：</dt>
             <dd>{{ name }}</dd>

             <dt>年龄：</dt>
             <dd>{{ age }}</dd>

             <dt>兴趣爱好：</dt>
             <dd>{{ hobbies.join('、') }}</dd>

             <dt>专业：</dt>
             <dd v-text="major"></dd>

             <dt>个性签名：</dt>
             <dd v-html="signature"></dd>
         </dl>
     </div>
   </div>
<script>
   const app = {
      data() {
         return {
            name: '姓名：李承泽',
            age: 21,
            hobbies: ['篮球', '唱歌', '网球'],
            major: '软件技术',
            signature: `
              <div class="signature">
                <p>欢迎来到我的世界！</p>
                <p>我是<span>李承泽</span>，一个热爱<span>运动</span>和<span>音乐</span>的年轻人。</p>
                <p>如果你有任何问题，请随时<a href="mailto:1067904242@qq.com">联系我</a>。</p>
              </div>
            `
         }
      }
   }
   Vue.createApp(app).mount('#counter')
</script>
</body>
</html>
